<template>
  <div class="banner" v-if="newList.length > 0">
    <div :class="newList.length > 1 ? 'swiper_all' : 'swiper_one'">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="item of newList" :key="item.id">
          <img
            :data-src="item.imgUrl"
            class="swiper-lazy"
            v-default-img="defaultImg"
            @click="toDetail(item.jumpType, item.jumpUrl)"
          />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "Banner",
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      defaultImg: require("@/assets/images/default-banner-cover.png"),
      swiperOption: {
        loop: true,
        loopedSlides: 3, // 必设不然最后一张右边没元素
        lazy: {
          loadPrevNext: true, //图片延迟加载
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        autoplay: {
          delay: 10000,
          // stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    newList() {
      if (this.list && this.list.length > 0) {
        if (this.list.length <= 1) {
          this.isLoop(false);
        }
        return this.list;
      } else {
        return [];
      }
    },
  },
  components: {
    swiper,
    swiperSlide,
  },
  mounted() {},
  methods: {
    isLoop(flag) {
      this.swiperOption.loop = flag;
    },
    toDetail(type, jumpUrl) {
      // 阅读器
      if (type === 0) {
        this.$router.push({
          name: "bookDetail",
          params: { id: jumpUrl },
        });
      } else if (type === 1) {
        window.open(jumpUrl, "_blank");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 264px;
  overflow: hidden;
  .swiper-container {
    overflow: visible !important;
    width: 668px;
    height: 264px;
    margin: auto;
    .swiper-wrapper {
      .swiper-slide {
        img {
          width: 668px;
          height: 264px;
          border-radius: 10px;
        }
      }
      .swiper-slide-active {
        margin-right: 30px;
        margin-left: 30px;
      }
      .swiper-slide-prev {
        margin: 0 0 0 -30px;
      } /*由于swiper-slide-active左右设置了10像素，默认往右边挤过去了单独给前一个div设置负10像素左右才能对齐*/
    }
    ::v-deep .swiper-pagination {
      .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
        &.swiper-pagination-bullet-active {
          background: #e86472;
        }
      }
    }
  }
  .swiper_one {
    .swiper-container {
      .swiper-wrapper {
        .swiper-slide-active {
          margin: 0;
        }
      }
      .swiper-pagination {
        display: none;
      }
    }
  }
}
</style>
